#{extends 'auth_main.html' /}

#{set "moreStyles"}
<style type="text/css">
</style>
#{/set}

#{set 'moreScripts'}
<script type="text/javascript">

            $(function () {
                // -------- add user dialog
                $('#add_div').dialog({
                    autoOpen:false,
                    width:400,
                    modal:true,
                    resizable:false,
                    buttons:{
                        "保存":function () {
                            if (submitNewEntity())
                                $(this).dialog("close");
                        },
                        "取消":function () {
                            $(this).dialog("close");
                        }
                    }
                });

                // Dialog Link
                $('#create_link').click(function () {
                    $('#add_div').css('display', '');
                    cleanForm();
                    $('#add_div').dialog('open');
                    return false;
                });

                // -------- assign roles dialog
                $('#assign_div').dialog({
                    autoOpen:false,
                    width:500,
                    height:600,
                    modal:true,
                    resizable:false,
                    buttons:{
                        "保存":function () {
                            submitAssignInfo();
                            $(this).dialog("close");
                        },
                        "取消":function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });

    function cleanForm() {
        document.getElementById('name').value = '';
        document.getElementById('key').value = '';
        document.getElementById('remark').value = '';
    }

    function submitNewEntity() {
        if ($("#name").val().trim()== "") {
            jqAlert("请输入角色名");
        }
        else if ($("#key").val().trim() == "") {
            jqAlert("请输入角色键值");
        }
        else {
            document.getElementById('add_form').submit();
        }
    }

    function deleteRole(userCount, url, id, prompt) {
        if (userCount > 0) {
            jqAlert('角色被 ' + userCount + ' 人使用，不能删除');
        } else {
            requireActionByPost(url, id, prompt);
        }
    }

    var listAction = #{jsAction @Functions.ajaxListByRoleId(':roleId') /}

    function showAssignForm(rid, roleName) {
        $('#assign_table_div').load(listAction({roleId:rid}), function () {});
        $("#assign_role_id").val(rid);
        $('#assign_div').css('display', '');
        $('#assign_div').dialog('option', "title", "为角色（" + roleName + "）分配功能");
        $('#assign_div').dialog('open');
    };

    function submitAssignInfo() {
        var functionIdChecked=$("input[name='functionId']:checked='checked'");


        var ridArray = document.getElementsByName("functionId");
        var empty = true;

        for (var i = 0; i < ridArray.length; i++) {
            if (ridArray[i].checked) {
                empty = false;
                break;
            }
        }

        if (empty) {
            jqAlert("请至少选择一个角色");
            return false;
        }
        document.getElementById('assign_form').submit();
        return true;
    }
</script>
#{/set}


<h1 id="title">角色管理</h1>
<div class="light_bar">
*{#{pluralize size:entityList.size(), word:'role' /} in #{pluralize size:entityCount, word:'role' /}}*
    *{&nbsp;<a class="link_as_button" href="javascript:showNewForm()">创建角色</a>}*
${entityList.size()} / ${entityCount} 角色&nbsp;
    <a href="#" id="create_link" class="ui-state-default ui-corner-all dialog_button">
            <span class="ui-icon ui-icon-newwin"></span>创建角色</a>

#{pagination page:pageSequence ?: 1, size:entityCount /}
</div>

<table id="roles-list">
    <thead>
    <tr>
        <th class="main">角色名</th>
        <th class="main">键值</th>
        <th class="main">备注</th>
        <th class="main" width="80px">创建时间</th>
        <th class="main" width="80px">最后更新</th>
        <th class="main">功能</th>
        <th width="100px">操作</th>
    </tr>
    </thead>
#{if entityList.size()>0}
    #{list items:entityList, as:'role'}
        <tr>
            <td class="main">${role.name}</td>
            <td class="main">${role.key}</td>
            <td class="main">${role.remark}</td>
            <td class="main">${role.createDate.format("yyyy-MM-dd")}</td>
            <td class="main">${role.lastUpdate?role.lastUpdate.format("yyyy-MM-dd"):""}</td>
            <td class="main">
                <a class="ui-state-default ui-corner-all opt_button"
                   href="javascript:showAssignForm('${role.id}','${role.name}');" >分配</a>
            </td>
            <td class="main">
                <a class="ui-state-default ui-corner-all opt_button" href="javascript:jqAlert('测试一下弹出框');">编辑</a>
                <a class="ui-state-default ui-corner-all opt_button" href="javascript:deleteRole(${role.userCount()},'@{SysRoles.delete}','${role.id}','确定删除角色(${role.name})？');">删除</a>
            </td>
        </tr>
    #{/list}
#{/if}
</table>



<div id="add_div" style="display: none;" title="创建角色">
    <form id="add_form" action="@{SysRoles.create}" method="post">
        <table class="myTable">
            <tr>
                <td align="right" class="input_label"><label for="name" class="input_required">角色名：</label></td>
                <td><input id="name" name="name" type="text" maxlength="50"/></td>
            </tr>
            <tr>
                <td align="right" class="input_label"><label for="key" class="input_required">键值：</label></td>
                <td><input id="key" name="key" type="text" maxlength="50"/></td>
            </tr>
            <tr class="no_bottom">
                <td align="right" class="input_label no_bottom"><label for="remark">备注：</label></td>
                <td class="no_bottom"><input id="remark" name="remark" type="text" maxlength="20"/></td>
            </tr>
        </table>
    </form>
</div>


<div id="assign_div" style="display: none;" class="hidden_div" title="分配角色">
    <form id="assign_form" action="@{SysRoles.assignFunctions()}" method="post">
        <input type="hidden" id="assign_role_id" name="roleId" value=""/>
        <div id="assign_table_div"></div>
    </form>
</div>